/** 注释
 * @Name highlight;
 * @Author FiveXu
 * @Description highlight
 * @Date 2021-06-24 09:50
 */
import HighLight from 'highlight.js'
import 'highlight.js/styles/github-dark.css'
import { App, DirectiveBinding } from 'vue'

const initHighLight = (app: App): void => {
  app.directive('highlight', {
    beforeMount (el, binding: DirectiveBinding) {
      const code = el.querySelectorAll('pre code')
      code.forEach((item: HTMLElement) => {
        if (typeof binding.value === 'string') {
          item.textContent = binding.value
        }
        HighLight.highlightBlock(item)
      })
    },
    updated (el, binding: DirectiveBinding) {
      const code = el.querySelectorAll('code')
      code.forEach((item: HTMLElement) => {
        if (typeof binding.value === 'string') {
          item.textContent = binding.value
        }
        HighLight.highlightBlock(item)
      })
    }
  })
}

export default initHighLight
